import React, { useEffect, useState } from 'react'
import { Col, Row, Card, Table } from 'antd'
import * as Icon from '@ant-design/icons'
import './home.css'
import { getData } from '../../api/index'
import MyEcharts from '../../components/Echarts/inedx'

const columns = [
  {
    title: '课程',
    dataIndex: 'name',
  },
  {
    title: '今日购买',
    dataIndex: 'todayBuy',
  },
  {
    title: '本月购买',
    dataIndex: 'monthBuy',
  },
  {
    title: '总购买',
    dataIndex: 'totalBuy',
  },
]
const countData = [
  {
    name: '今日支付订单',
    value: 1234,
    icon: 'CheckCircleOutlined',
    color: '#2ec7c9',
  },
  {
    name: '今日收藏订单',
    value: 3421,
    icon: 'ClockCircleOutlined',
    color: '#ffb980',
  },
  {
    name: '今日未支付订单',
    value: 1234,
    icon: 'CloseCircleOutlined',
    color: '#5ab1ef',
  },
  {
    name: '本月支付订单',
    value: 1234,
    icon: 'CheckCircleOutlined',
    color: '#2ec7c9',
  },
  {
    name: '本月收藏订单',
    value: 3421,
    icon: 'ClockCircleOutlined',
    color: '#ffb980',
  },
  {
    name: '本月未支付订单',
    value: 1234,
    icon: 'CloseCircleOutlined',
    color: '#5ab1ef',
  },
]
const Home = () => {
  const userImg = require('../../assets/images/user.png')
  //创建echarts响应数据
  const [echartsData, setEchartsData] = useState({})

  useEffect(() => {
    getData().then(({ data }) => {
      console.log(data)
      const { tableData, orderData, userData, videoData } = data.data
      setTabData(tableData)

      //给echarts数据组装
      const order = orderData
      const xData = order.date
      const keyArray = Object.keys(order.data[0])
      const series = []
      keyArray.forEach(key => {
        series.push({
          name: key,
          data: order.data.map(item => item[key]),
          type: 'line',
        })
      })
      setEchartsData({
        order: {
          xData,
          series,
        },
        user: {
          xData: userData.map(item => item.date),
          series: [
            {
              name: '新增用户',
              data: userData.map(item => item.new),
              type: 'bar',
            },
            {
              name: '活跃用户',
              data: userData.map(item => item.active),
              type: 'bar',
            },
          ],
        },
        video: {
          series: [
            {
              data: videoData,
              type: 'pie',
            },
          ],
        },
      })
    })
  }, [])
  const [tabData, setTabData] = useState([])
  return (
    <>
      <Row className="home">
        <Col span={8}>
          <Card hoverable>
            <div className="user">
              <img alt="" src={userImg}></img>
              <div className="userinfo">
                <p className="name">阿司匹林</p>
                <p className="access">超级管理员</p>
              </div>
            </div>
            <div className="login-info">
              <p>
                上次登录时间:
                <span>2024-7-5</span>
              </p>
              <p>
                上次登录地点:
                <span>重庆</span>
              </p>
            </div>
          </Card>
          <Card>
            <Table rowKey={'name'} columns={columns} dataSource={tabData} pagination={false}></Table>
          </Card>
        </Col>
        <Col span={16}>
          <div className="num">
            {countData.map((item, index) => {
              return (
                <Card key={index} hoverable>
                  <div className="icon-box" style={{ background: item.color }}>
                    {React.createElement(Icon[item.icon])}
                  </div>

                  <div className="detail">
                    <p className="num">￥{item.value}</p>
                    <p className="txt">{item.name}</p>
                  </div>
                </Card>
              )
            })}
          </div>
          {echartsData.order && <MyEcharts chartData={echartsData.order} style={{ height: '280px' }}></MyEcharts>}
          <div className="graph">
            {echartsData.user && <MyEcharts chartData={echartsData.user} style={{ height: '240px', width: '50%' }}></MyEcharts>}
            {echartsData.video && <MyEcharts chartData={echartsData.video} isAxisChart={false} style={{ height: '240px', width: '50%' }}></MyEcharts>}
          </div>
        </Col>
      </Row>
    </>
  )
}

export default Home
